<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单之类的qwq</title>
    <style>
      .container {
        width: 400px;
        margin: 50px auto;
      }
      ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
      }
      .menu {
        border: 1px solid rgba(5, 5, 5, 0.5);
        width: 250px;
        border-radius: 8px;
      }
      .menu-item {
        margin: 4px;
        line-height: 40px;
        padding: 0 24px 0 16px;
        border-radius: 8px;
        position: relative;
      }
      .menu-item:hover {
        cursor: pointer;
        background-color: rgba(5, 5, 5, 0.06);
      }
      .menu-item-active {
        color: #1677ff;
        background-color: #e6f4ff;
      }
      .sub-menu {
        display: none;
      }
      .sub-menu-icon {
        position: absolute;
        right: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul class="menu">
        <li class="menu-item menu-item-active"><a>一级菜单项-1</a></li>
        <li class="menu-item"><a>一级菜单项-2</a></li>
        <li class="menu-item">
          <a>一级菜单项-3</a>
          <span class="sub-menu-icon">+</span>
          <ul class="sub-menu">
            <li class="sub-menu-item"><span> 二级菜单项-1</span></li>
            <li class="sub-menu-item"><span> 二级菜单项-2</span></li>
          </ul>
        </li>
        <li class="menu-item"><a>一级菜单项-4</a></li>
      </ul>
    </div>
    <script>
      const menu = document.querySelector(".menu");
      menu.addEventListener("click", (event) => {
        const menuItem = event.target.closest(".menu-item");
        if (!menuItem || !menu.contains(menuItem)) return;
        const active = menu.querySelector(".menu-item-active");
        active.classList.remove("menu-item-active");
        menuItem.classList.add("menu-item-active");
      });
      menu.addEventListener("click", (event) => {
        const menuItem = event.target.closest(".menu-item");
        if (!menuItem || !menu.contains(menuItem)|| !menuItem.querySelector(".sub-menu-icon")) return;
        const icon = document.querySelector(".sub-menu-icon");
        if(icon.textContent == "+")icon.textContent = "-";
        else icon.textContent = "+";
        menuItem.querySelector("ul").classList.toggle("sub-menu");
      });
    </script>
  </body>
</html>
